<template>
	<view class="container">
		    <CustomNavBar title="充值" />

		<view class="content">
			<view>
				<text class="title-class">充值金额</text>
			</view>
			<view class="presets-section">
				<view v-for="(amount, index) in presetAmounts" :key="index" 
					class="preset-card" 
					:class="{ 'selected': selectedAmount == amount }" 
					@click="selectPreset(amount)">
					<text class="preset-amount">¥ {{ amount }}</text>
				</view>
			</view>
			<view>
				<input class="amount-input" type="number" v-model="customAmount" placeholder="自定义金额" @input="onCustomAmountInput" />
			</view>
		</view>
		
		<view class="footer">
			<button class="confirm-recharge-btn" @click="confirmRecharge">立即充值</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import CustomNavBar from '@/components/CustomNavBar.vue'

const customAmount = ref('');
const selectedPreset = ref(null);
const presetAmounts = [10, 20, 50, 100, 200, 500];

const selectedAmount = computed(() => {
	return customAmount.value !== '' ? parseFloat(customAmount.value) : selectedPreset.value;
});

const selectPreset = (amount) => {
	selectedPreset.value = amount;
	customAmount.value = ''; // 清空自定义输入
};

const onCustomAmountInput = (e) => {
	selectedPreset.value = null; // 取消预设选择
	customAmount.value = e.detail.value;
};

const confirmRecharge = () => {
if (!selectedAmount.value || selectedAmount.value <= 0) {
	uni.showToast({ title: '请输入或选择充值金额', icon: 'none' });
	return;
}

uni.showLoading({ title: '功能暂未开放...' });

	// 模拟支付过程
    setTimeout(() => {
      uni.hideLoading();
      
    }, 1000);
};

const back = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.container {
	background-color: #fff;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.content {
	padding: 40rpx;
	flex: 1;
}

.input-section {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 16rpx;
	margin-bottom: 40rpx;
}

.input-label {
	font-size: 28rpx;
}

.amount-input {
	/* border-style: solid; */
	height: 2rem;
	font-size: 30rpx;
	border: 1px solid #eee;
	padding: 15rpx;
	margin-top: 25rpx;
}

.presets-section {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.preset-card {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #EFF1F5;
	border: 1px solid #eee;
	padding: 30rpx;
	border-width: 5rpx;
	opacity: 0.9;
	/* text-align: center; */
	/* transition: all 0.2s; */
}

.preset-card.selected {
	background-color: #fff;
	border-color: #1BCCB4;
	border-width: 5rpx;
}

.preset-amount {
	font-size: 35rpx;
	font-weight: 500;
}

.footer {
	padding: 30rpx 40rpx 50rpx;
	background-color: #fff;
	/* box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); */
}

.confirm-recharge-btn {
	background-color: #1BCCB4;
	color: #fff;
	border-radius: 50rpx;
	width: 100%;
}
.title-class {
	display: block;
	font-size: 40rpx;
	font-weight: 500;
	margin-bottom: 40rpx;
}
</style>